<template>
    <div>
        <center>
            <h1>RefChild</h1>
            <p>{{ title }}</p>
            <button @click="getParent">找到父组件</button>
        </center>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: 'RefChild的标题',
        };
    },
    methods: {
        updateTitle() {
            this.title = 'RefChild子组件中的函数进行修改后的标题';
        },
        getParent() {
            console.log('getParent', this.$parent.$options.name);
            console.log('getParentComponent', this.$parent);
            // 通过$root可以找到顶层的入口的组件（主组件）
            console.log('getRoot', this.$root.$children[0].$options.name);
            this.$parent.age = 28;
        },
    },
};
</script>

<style></style>
